<template>
	<view class="bruce" id="conent">
		<ul class="bubble-bgwall">
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
		</ul>
		<view class="toptitle" @click="home">
			智能农业监控系统
		</view>
		<view class="showcontent">
			<view class="introduction">
				<scroll-view id="scrollview" scroll-y>
					<view class="predictioninfo">
						<view class="search">
							<form @submit="searchDevice">
								<input type="text" maxlength='10' placeholder='请输入需要连接的设备ID'
									placeholder-style="color:#dcdcdc" name="deviceid" />
								<button class="pic" form-type="submit"></button>
							</form>
						</view>
						<ul class="noneprediction" v-if="devicepredictionlist.length==0">
							<view class="nonepredictioninfo">
								当前未连接设备
							</view>
						</ul>
						<ul class="prediction" v-if="devicepredictionlist.length>0">
							<view class="navbar">
								<text class="span1">参数名</text>
								<text class="span1">参数值</text>
								<text class="span1">接收时间</text>
							</view>
							<view class="prompt">
								温度的单位为&#8451；湿度的单位为&tau;；气压的单位为&tau;
							</view>

							<li v-for="item in devicepredictionlist" :key="item.id">
								<view class="progress">
									<view class="row">
										<text class="span2">{{item.paramsname}}</text>
										<text class="span2">{{item.paramsvalues}}</text>
										<text class="span2">{{item.accepttime}}</text>
									</view>
								</view>
							</li>
						</ul>
					</view>
					<view class="switch_content">
						<view class="title">
							远程控制开关
						</view>
						<view class="key">
							<view class="switch" :class="{styleswitch:state}" @click="LEDswitch">
								<span>{{lighting}}</span>
							</view>
							<view class="switch" :class="{styleswitch:state1}" @click="Pumpswitch">
								<span>{{waterpump}}</span>
							</view>
							<view class="switch" :class="{styleswitch:state2}" @click="FANswitch">
								<span>{{fan}}</span>
							</view>
							<view class="switch" :class="{styleswitch:state3}" @click="policeswitch">
								<span>{{police}}</span>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="andshowcontent">
			<my-component :title="'实时数据'"></my-component>
			<view class="andintroduction">
				<scroll-view id="andscrollview" scroll-y>
					<view class="predictioninfo">
						<view class="search">
							<form @submit="searchDevice">
								<input type="text" maxlength='10' placeholder='请输入需要连接的设备ID'
									placeholder-style="color:#dcdcdc" name="deviceid" />
								<button class="pic" form-type="submit"></button>
							</form>
						</view>
						<ul class="noneprediction" v-if="devicepredictionlist.length==0">
							<view class="nonepredictioninfo">
								当前未连接设备
							</view>
						</ul>
						<ul class="prediction" v-if="devicepredictionlist.length>0">
							<view class="navbar">
								<text class="span1">参数名</text>
								<text class="span1">参数值</text>
								<text class="span1">接收时间</text>
							</view>
							<view class="prompt">
								温度的单位为&#8451；湿度的单位为&tau;；气压的单位为&tau;
							</view>

							<li v-for="item in devicepredictionlist" :key="item.id">
								<view class="progress">
									<view class="row">
										<text class="span2">{{item.paramsname}}</text>
										<text class="span2">{{item.paramsvalues}}</text>
										<text class="span2">{{item.accepttime}}</text>
									</view>
								</view>
							</li>
						</ul>
					</view>
					<view class="switch_content">
						<view class="title">
							远程控制开关
						</view>
						<view class="key">
							<view class="switch" :class="{styleswitch:state}" @click="LEDswitch">
								<span>{{lighting}}</span>
							</view>
							<view class="switch" :class="{styleswitch:state1}" @click="Pumpswitch">
								<span>{{waterpump}}</span>
							</view>
							<view class="switch" :class="{styleswitch:state2}" @click="FANswitch">
								<span>{{fan}}</span>
							</view>
							<view class="switch" :class="{styleswitch:state3}" @click="policeswitch">
								<span>{{police}}</span>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<Bottom-component></Bottom-component>
		</view>
		<view class="righttop">
			<span @click="mypage">欢迎：{{userid}}</span>
		</view>
		<view class="winfroted-glass">
			<ul class="nav1">
				<li class="title1" @click="home">系统简介</li>
				<li class="title1" id="nav2">进入系统
					<ul id="nav3">
						<li class="title2" @click="Deviceinformation">设备信息</li>
						<li class="title2" @click="Realtime">设备详情</li>
						<li class="title2" @click="statisticanalysis">统计分析</li>
						<li class="title2" @click="prediction">实时数据</li>
						<li class="title2" @click="historydata">历史数据</li>
					</ul>
				</li>
				<li class="title1" @click="relatedTechnologies">相关技术</li>
				<li class="title1" @click="InsiteCommunity">进入社区</li>
				<li class="title1" @click="teamSpirit">团队风采</li>
				<li class="title1" @click="aboutUs">关于我们</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import MyComponent from '../my-component/my-component.vue';
	import {
		VUE_APP_BASE_URL
	} from 'utils/request.js';
	import {
		myrequest
	} from '../../utils/request';
	import {
		formatDate
	} from "../../utils/time.js";
	export default {
		components: {
			MyComponent
		},
		data() {
			return {
				cssid: '',
				userid: 'itheima0001',
				devicepredictionlist: [],
				deviceid: 'null',
				status: '1',
				status1: '1',
				status2: '1',
				status3: '1',
				state: false,
				state1: false,
				state2: false,
				state3: false,
				lighting: "开灯",
				waterpump: "开水泵",
				fan: "开风扇",
				police: "立即报警"
			}
		},
		onLoad(e) {
			this.cssid = e.cssid;
		},
		onShow() {
			let that = this;
			let deviceid = that.deviceid
			that.myintervalid = setInterval(function(e) {
				if (deviceid !== "undefined") {
					that.getDeviceInfo(e);
					// console.log("我执行了");
					// console.log(that.deviceid);
				}
			}, 3000)

		},
		mounted() {
			this.draw();
		},
		methods: {
			// 报警开关
			policeswitch(e) {
				let deviceid = this.deviceid
				if (deviceid === "null" || deviceid === "") {
					uni.showToast({
						title: "请先连接设备",
						icon: 'error',
						duration: 2000
					});
				} else {
					uni.request({
						url: VUE_APP_BASE_URL + '/device/devicecontrol',
						data: {
							deviceid: this.deviceid,
							message: '{Beep' + this.status3 + '}'
						},
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						method: "POST",
						success: (res) => {
							if (res.data.code == 200) {
								this.status3 = this.status3 === 0 ? 1 : 0;
								this.state3 = !this.state3
								this.police = this.police === "立即报警" ? "取消报警" : "立即报警"
								uni.showToast({
									title: res.data.message,
									icon: 'success',
									duration: 2000
								});
							}
						},
					})
				}
			},
			// 风扇开关
			FANswitch(e) {
				let deviceid = this.deviceid
				if (deviceid === "null" || deviceid === "") {
					uni.showToast({
						title: "请先连接设备",
						icon: 'error',
						duration: 2000
					});
				} else {
					uni.request({
						url: VUE_APP_BASE_URL + '/device/devicecontrol',
						data: {
							deviceid: this.deviceid,
							message: '{Feng' + this.status2 + '}'
						},
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						method: "POST",
						success: (res) => {
							if (res.data.code == 200) {
								this.status2 = this.status2 === 0 ? 1 : 0;
								this.state2 = !this.state2
								this.fan = this.fan === "开风扇" ? "关风扇" : "开风扇"
								uni.showToast({
									title: res.data.message,
									icon: 'success',
									duration: 2000
								});
							}
						},
					})
				}
			},
			// 水泵开关
			Pumpswitch(e) {
				let deviceid = this.deviceid
				if (deviceid === "null" || deviceid === "") {
					uni.showToast({
						title: "请先连接设备",
						icon: 'error',
						duration: 2000
					});
				} else {
					uni.request({
						url: VUE_APP_BASE_URL + '/device/devicecontrol',
						data: {
							deviceid: this.deviceid,
							message: '{Water' + this.status1 + '}'
						},
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						method: "POST",
						success: (res) => {
							if (res.data.code == 200) {
								this.status1 = this.status1 === 0 ? 1 : 0;
								this.state1 = !this.state1
								this.waterpump = this.waterpump === "开水泵" ? "关水泵" : "开水泵"
								uni.showToast({
									title: res.data.message,
									icon: 'success',
									duration: 2000
								});
							}
						},
					})
				}
			},
			// LED灯开关
			LEDswitch(e) {
				let deviceid = this.deviceid
				if (deviceid === "null" || deviceid === "") {
					uni.showToast({
						title: "请先连接设备",
						icon: 'error',
						duration: 2000
					});
				} else {

					uni.request({
						url: VUE_APP_BASE_URL + '/device/devicecontrol',
						data: {
							deviceid: this.deviceid,
							message: '{LED' + this.status + '}'
						},
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						method: "POST",
						success: (res) => {
							if (res.data.code == 200) {
								this.status = this.status === 0 ? 1 : 0;
								this.state = !this.state
								this.lighting = this.lighting === "开灯" ? "关灯" : "开灯"
								uni.showToast({
									title: res.data.message,
									icon: 'success',
									duration: 2000
								});
							}
						},
					})
				}
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			},
			getDeviceInfo(e) {
				// console.log("我执行了吗");
				uni.request({
					url: VUE_APP_BASE_URL + '/newdata/newlist',
					data: {
						deviceid: this.deviceid,
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					method: "POST",
					success: (res) => {
						if (res.data.code == 200) {
							setTimeout(() => {
								if (Array.isArray(res.data.data)) {
									this.devicepredictionlist = res.data
										.data.map(item => {
											// 格式化时间戳，假设 createtime 是以毫秒为单位的 Unix 时间戳  
											item.accepttime =
												formatDate(item
													.accepttime * 1000
												);
											return item;
										});
								}
								let tempList = res.data.data
									.filter(obj => ['GZ', 'SD', 'TRSD', 'WD'].includes(obj
										.paramsname));

								this.devicepredictionlist = tempList.map(
									item => {
										// 创建一个新的对象副本，避免直接修改原始对象  
										const newItem = {
											...item
										}; // 使用展开运算符创建浅拷贝  

										// 根据paramsname的值更新newItem的paramsname属性  
										if (newItem.paramsname === 'GZ') {
											newItem.paramsname = '光照(GZ)';
										} else if (newItem.paramsname === 'SD') {
											newItem.paramsname = '室内湿度(SD)';
										} else if (newItem.paramsname === 'WD') {
											newItem.paramsname = '室内温度(WD)';
										} else if (newItem.paramsname === 'TRSD') {
											newItem.paramsname = '土壤湿度(TRSD)';
										}

										// 返回新的对象副本  
										return newItem;
									}
								);
							}, 500);
						}
					}
				})
			},
			searchDevice(e) {
				let userid = uni.getStorageSync('userid')
				if (e.detail.value.deviceid != '' && e.detail.value.deviceid != " ") {
					uni.request({
						url: VUE_APP_BASE_URL + '/device/seldevice',
						data: e.detail.value,
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						method: "POST",
						success: (res) => {
							// console.log(res);
							if (res.data.data[0].userid === userid) {
								uni.request({
									url: VUE_APP_BASE_URL + '/newdata/newlist',
									data: e.detail.value,
									header: {
										"Content-Type": "application/x-www-form-urlencoded"
									},
									method: "POST",
									success: (res) => {
										if (res.data.code == 200) {
											this.deviceid = e.detail.value.deviceid
											// console.log(res);
											/*如果验证服务器成功则执行成功提示*/
											uni.showToast({
												title: "查询成功",
												icon: 'success',
												duration: 1000
											});
											setTimeout(() => {
												if (Array.isArray(res.data.data)) {
													this.devicepredictionlist = res.data
														.data.map(item => {
															// 格式化时间戳，假设 createtime 是以毫秒为单位的 Unix 时间戳  
															item.accepttime =
																formatDate(item
																	.accepttime * 1000
																);
															return item;
														});
												}
												let tempList = res.data.data
													.filter(obj => ['GZ', 'SD', 'TRSD',
														'WD'
													].includes(obj.paramsname));

												this.devicepredictionlist = tempList.map(
													item => {
														// 创建一个新的对象副本，避免直接修改原始对象  
														const newItem = {
															...item
														}; // 使用展开运算符创建浅拷贝  

														// 根据paramsname的值更新newItem的paramsname属性  
														if (newItem.paramsname ===
															'GZ') {
															newItem.paramsname =
																'光照(GZ)';
														} else if (newItem
															.paramsname === 'SD') {
															newItem.paramsname =
																'室内湿度(SD)';
														} else if (newItem
															.paramsname === 'WD') {
															newItem.paramsname =
																'室内温度(WD)';
														} else if (newItem
															.paramsname === 'TRSD') {
															newItem.paramsname =
																'土壤湿度(TRSD)';
														}

														// 返回新的对象副本  
														return newItem;
													}
												);
											}, 500);
										} else if (res.data.code == 10018) {
											uni.showToast({
												title: "该设备没有数据",
												icon: 'error',
												duration: 2000
											});
										} else {
											uni.showToast({
												title: "参数错误",
												icon: 'error',
												duration: 2000
											});
										}
									}
								})
							} else {
								alert('该设备不属于您，您不能控制该设备')
							}
						}
					});


				} else {
					uni.showToast({
						title: "设备ID不能为空",
						icon: 'error',
						duration: 1000
					});
				}
			},
			mypage() {
				uni.navigateTo({
					url: '/pages/mypage/mypage?cssid=' + this.cssid
				})
			},
			historydata() {
				uni.navigateTo({
					url: '/pages/historydata/historydata?cssid=' + this.cssid
				})
			},
			prediction() {
				uni.navigateTo({
					url: '/pages/prediction/prediction?cssid=' + this.cssid
				})
			},
			statisticanalysis() {
				uni.navigateTo({
					url: '/pages/statisticanalysis/statisticanalysis?cssid=' + this.cssid
				})
			},
			Realtime() {
				uni.navigateTo({
					url: '/pages/Realtime/Realtime?cssid=' + this.cssid
				})
			},
			Deviceinformation() {
				uni.navigateTo({
					url: '/pages/Deviceinformation/Deviceinformation?cssid=' + this.cssid
				})
			},
			LoginRegister(e) {
				uni.navigateTo({
					url: '/pages/LoginRegister/LoginRegister?cssid=' + this.cssid
				})
			},
			teamSpirit() {
				uni.reLaunch({
					url: '/pages/teamSpirit/teamSpirit?cssid=' + this.cssid
				})
			},
			InsiteCommunity() {
				uni.navigateTo({
					url: '/pages/InsiteCommunity/InsiteCommunity?cssid=' + this.cssid
				})
			},
			relatedTechnologies() {
				uni.navigateTo({
					url: '/pages/relatedTechnologies/relatedTechnologies?cssid=' + this.cssid
				})
			},
			aboutUs() {
				uni.navigateTo({
					url: '/pages/aboutUs/aboutUs?cssid=' + this.cssid
				})
			},
			forgotpassword(e) {
				uni.navigateTo({
					url: '/pages/forgotpassword/forgotpassword?cssid=' + this.cssid
				})
			},
			home() {
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			draw(e) {
				let themes = document.querySelector('.bruce');
				let color = document.querySelectorAll(".bubble")
				let userid = uni.getStorageSync('userid')
				let username = uni.getStorageSync('username');
				this.userid = username
				if (this.cssid == 1) {
					this.button = false;
					this.title = "白天模式"
					this.cssid = 1
					themes.style.background = 'linear-gradient(270deg, #0a0b35, #120144)'
					color.forEach(function(element) {
						element.style.color = '#83c0f7'
					});

				} else {
					this.title = "夜间模式"
					this.button = true;
					this.cssid = 0
					themes.style.background = 'linear-gradient(270deg, #819cad, #81a5bd)'
					color.forEach(function(element) {
						element.style.color = '#6661e6'
					});

				}
			}

		}
	}
</script>

<style lang="scss">
	@media screen and (min-width:640px) {
		#conent {
			background: #030812 !important;

			.toptitle {
				position: fixed;
				margin-left: 5px;
				width: 100%;
				padding: 20px;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0px;
				font-weight: bold;
				color: #d8d8d8;
				left: 0;
				display: block;
				background: #393d49;
				background-image: url('https://gd-hbimg.huaban.com/23c7d4ff432744f58bbd2087eb6745a4f66d95c757996-Z6BbHB_fw1200');
				background-repeat: no-repeat;
				background-size: 100vw;
			}

			.righttop {
				position: fixed;
				margin-left: 5px;
				width: 50%;
				padding: 20px 40px 20px 0;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0;
				font-weight: bold;
				color: #d8d8d8;
				right: 0;
				display: block;
				text-align: right;
				background: transparent;

				span {
					&:hover {
						color: #009688;
					}
				}
			}

			.showcontent {
				background: rgba(255, 255, 255, 0.5);
				z-index: 10;
				display: block;
				justify-content: center;
				position: fixed;
				left: 0;
				margin: 0 50px 0 50px;
				width: 100%;
				height: 100%;
				backdrop-filter: blur(3px);

				.introduction {
					background-color: rgba(0, 0, 0, 0.126);
					display: block;
					overflow: hidden;
					box-sizing: border-box;
					position: relative;
					margin-top: 120px;
					margin-left: 120px;
					margin-right: 100px;
					padding: 20px;
					border-radius: 5px;

					#scrollview {
						width: 100%;
						height: 80vh;
						background-color: transparent;



						.predictioninfo {
							.search {
								width: 100%;
								background-image: linear-gradient(to top right, #646464, #4a939e);
								height: 50px;
								margin-bottom: 10px;
								border-radius: 50px;

								input {
									background-color: transparent;
									width: 75%;
									height: 50px;
									padding: 0px 20px;
									position: relative;
									left: 15%;
									text-align: left;
									color: #fdfdfd;
								}

								.pic {
									position: relative;
									background-color: transparent;
									width: 50px;
									height: 50px;
									background-image: url('https://gd-hbimg.huaban.com/ebdddd7b212eff328ee1d55b788a2ad25bc4f15a2325-Mz91P9');
									background-position: center center;
									background-size: cover;
									background-repeat: no-repeat;
									border: none;
									border-radius: 50%;
									top: -52px;
									left: -43%;
								}
							}

							.noneprediction {
								display: grid;
								grid-template-columns: repeat(1, 1fr);
								justify-items: center;
								list-style-type: none;
								padding: 20px;
								color: #ffffff;
								box-sizing: border-box;
							}

							.prediction {
								display: grid;
								grid-template-columns: repeat(1, 1fr);
								justify-items: center;
								list-style-type: none;
								padding: 0;
								box-sizing: border-box;


								.navbar {
									display: grid;
									grid-template-columns: repeat(3, 1fr);
									justify-items: center;
									list-style-type: none;
									padding: 0;
									box-sizing: border-box;
									background-color: #222222;
									width: 100%;
									position: sticky;
									top: 0;


									.span1 {
										width: 100px;
										text-align: center;
										padding: 5px;
										position: relative;
										margin-bottom: 5px;
										color: #f5f5f5;

										&::before {
											content: '';
											position: absolute;
											width: 30%;
											height: 2px;
											bottom: 0px;
											left: 50%;
											transform: translateX(-50%);
											background-color: rgba(255, 255, 255, 1);
											opacity: 1;
											border-radius: 5px;
										}
									}

								}

								.prompt {
									background-color: #5b5b5b;
									text-align: center;
									padding: 5px;
									border-radius: 5px;
									color: #b19220;
									left: 0;
									display: flex;
									align-items: center;
									justify-content: center;
									height: 22px;
									font-size: 12px;
									width: 100%;
								}

								li {
									background-color: rgba(179, 179, 179, 0.3);
									width: 100%;

									.row {
										display: grid;
										grid-template-columns: repeat(3, 1fr);
										justify-items: center;
										list-style-type: none;
										padding: 0;
										box-sizing: border-box;
										width: 100%;
										padding: 5px 0px;
										border-bottom: #acacac solid 1px;

										.span2 {
											display: inline-flex;
											justify-content: center;
											align-items: center;
											text-align: center;
											color: #000;
										}
									}


									span {
										display: block;
										text-align: center;
										width: 100px;
										padding: 10px;
										margin: 0 auto;
										background-color: transparent;
									}

									&:hover {
										background-image: linear-gradient(to top right, #646464, #4a939e);
									}
								}
							}
						}

						.switch_content {
							width: 90%;
							margin: 20px auto;
							border-radius: 5px;
							background-color: rgba(0, 0, 0, .17);
							overflow: hidden;

							.title {
								color: #fff;
								padding: 30px 10px 10px 10px;
								font-size: 20px;
								text-align: center;
								font-family: cursive;
							}

							.key {
								padding: 10px 10px 20px 10px;
								display: grid;
								grid-template-columns: repeat(2, 1fr);
								justify-items: center;
								align-items: center;

								@media screen and (min-width:1000px) {

									padding: 10px 10px 20px 10px;
									display: grid;
									grid-template-columns: repeat(4, 1fr);
									justify-items: center;
									align-items: center;
								}

								.switch {
									width: 200px;
									height: 200px;
									margin: 10px;
									border-radius: 10px;
									display: inline-flex;
									justify-content: center;
									align-items: center;
									background-color: #81a5bd;
									background-image: url('https://gd-hbimg.huaban.com/d955622ea1b3c8e3d6c7992252d67bf9183b79c76ffe2-XPDPqn_fw1200');
									background-position: center center;
									background-size: cover;
									transition: background-image 1s;


									&:nth-child(2) {
										background-image: url('https://gd-hbimg.huaban.com/9296d4dcfbc9cebd031f545694187cea6222321b53f59-N1JI1p');
									}

									&:nth-child(3) {
										background-image: url('https://gd-hbimg.huaban.com/a5de6e75fb2218c64b3abb4134f7aac7532775e243a2-NbMClc_fw1200');
									}

									&:nth-child(4) {
										background-image: linear-gradient(to top right, #386b2d, #e7ea99);
									}

									span {
										display: inline-flex;
										justify-content: center;
										align-items: center;
										width: 100%;
										height: 100%;
										border-radius: 10px;
										color: #ffffff;
										font-family: cursive;
										background-color: rgba(0, 0, 0, .47);
										font-weight: bold;
										font-size: 30px;
									}

									&:hover {
										// background-color: rgba(194, 252, 252, .13);
										box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
									}
								}

								.styleswitch {
									width: 200px;
									height: 200px;
									margin: 10px;
									border-radius: 10px;
									display: inline-flex;
									justify-content: center;
									align-items: center;
									background-image: url('http://eb118-file.cdn.bcebos.com/upload/4c1923a667444f259c9ff79afbeaadb6_1525525898.png?');
									background-color: #81a5bd;


									&:nth-child(2) {
										background-image: url('https://gd-hbimg.huaban.com/5c1c34bb1556c2d646cb9cd3832f76b2e696d3574115f-U9zBdg');
									}

									&:nth-child(3) {
										background-image: url('https://gd-hbimg.huaban.com/b4cdf8d9c3fc277d6ae8bcf1cb123bce8a384245afd59-CrGWsU_fw1200');
									}

									&:nth-child(4) {
										background-image: linear-gradient(to top right, #fd5777, #fec576);
									}

									span {
										display: inline-flex;
										justify-content: center;
										align-items: center;
										width: 100%;
										height: 100%;
										border-radius: 10px;
										color: #ffffff;
										background-color: rgba(0, 0, 0, .47);
										font-weight: bold;
										font-family: cursive;
										font-size: 30px;
									}

									&:hover {
										// background-color: rgba(194, 252, 252, .13);
										box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
									}
								}


							}

							&:hover {
								// background-color: rgba(194, 252, 252, .13);
								box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
							}
						}
					}


				}

			}

			.andshowcontent {
				display: none;
			}

			.winfroted-glass {
				background-color: transparent;
				z-index: 10;
				width: 140px;
				display: flex;
				position: fixed;
				left: 0px;
				top: 10px;

				.nav1 {
					margin-top: 30px;
					width: 120px;
					height: 100vh;
					background-color: #393d49;
					position: relative;
					display: block;
					margin-left: 5px;
					box-sizing: border-box;
					padding: 50px 0 0 0;
					border-left: 5px solid #222e6f;
					justify-content: center;
					text-align: center;

					.title1 {
						width: 100%;
						margin: 10px auto;
						padding: 10px 0;
						list-style: none;
						text-align: center;
						color: #d8d8d8;
						transition: background-color 0.3s ease;

						&:hover {
							background: #009688;
							border-right: #ffffff 2px solid;
							cursor: pointer;
						}
					}

					.title1:nth-child(2) {
						#nav3 {
							display: none;
							overflow: hidden;
							box-sizing: border-box;
						}

						&:hover {
							#nav3 {
								display: block;
								position: relative;
								margin-top: 10px;
								left: 0px;
								width: 100%;

								.title2 {
									width: 100%;
									left: -14px;
									margin: 10px auto;
									position: relative;
									padding: 10px 0;
									list-style: none;
									display: block;
									text-align: center;
									transition: background-color 0.3s ease;

									&:hover {
										display: block;
										width: 100%;
										margin: 10px auto;
										padding: 10px 0;
										list-style: none;
										display: block;
										text-align: center;
										background: linear-gradient(to left, #9cd3d3, #008174) no-repeat right bottom;
										background-size: 90% 2px;
										transition: background-size 0.3s;
									}
								}

								&:hover {
									background: #008174;
								}
							}
						}
					}


				}

			}
		}
	}

	.bruce {
		background-image: linear-gradient(270deg, #819cad, #81a5bd);
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		.showcontent {
			display: none;
		}

		.andshowcontent {
			z-index: 10;
			display: block;
			justify-content: center;
			position: fixed;
			margin: 0 50px 0 50px;
			width: 100%;
			height: 100%;

			.andintroduction {
				background-color: rgba(0, 0, 0, 0.426);
				backdrop-filter: blur(2px);
				display: block;
				overflow: hidden;
				box-sizing: border-box;
				position: relative;
				margin-top: 10vh;
				margin-left: 0px;
				margin-right: 0px;
				bottom: 63px;
				padding: 10px;

				#andscrollview {
					width: 100%;
					padding-top: 60px;
					height: 90vh;
					padding-bottom: 5px;
					box-sizing: border-box;
					color: #eaeaea;
					font-size: 18px;
					background-color: transparent;

					.switch_content {
						width: 90%;
						margin: 20px auto;
						border-radius: 5px;
						background-color: rgba(0, 0, 0, .17);
						overflow: hidden;

						.title {
							color: #fff;
							padding: 30px 10px 10px 10px;
							font-size: 20px;
							text-align: center;
							font-family: cursive;
						}

						.key {
							padding: 10px 10px 20px 10px;
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							justify-items: center;
							align-items: center;


							.switch {
								width: 160px;
								height: 160px;
								margin: 10px;
								border-radius: 10px;
								display: inline-flex;
								justify-content: center;
								align-items: center;
								background-color: #81a5bd;
								background-image: url('https://gd-hbimg.huaban.com/d955622ea1b3c8e3d6c7992252d67bf9183b79c76ffe2-XPDPqn_fw1200');
								background-position: center center;
								background-size: cover;
								transition: background-image 1s;


								&:nth-child(2) {
									background-image: url('https://gd-hbimg.huaban.com/9296d4dcfbc9cebd031f545694187cea6222321b53f59-N1JI1p');
								}

								&:nth-child(3) {
									background-image: url('https://gd-hbimg.huaban.com/a5de6e75fb2218c64b3abb4134f7aac7532775e243a2-NbMClc_fw1200');
								}

								&:nth-child(4) {
									background-image: linear-gradient(to top right, #386b2d, #e7ea99);
								}

								span {
									display: inline-flex;
									justify-content: center;
									align-items: center;
									width: 100%;
									height: 100%;
									border-radius: 10px;
									color: #ffffff;
									font-family: cursive;
									background-color: rgba(0, 0, 0, .47);
									font-weight: bold;
									font-size: 30px;
								}

								&:hover {
									// background-color: rgba(194, 252, 252, .13);
									box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
								}
							}

							.styleswitch {
								width: 160px;
								height: 160px;
								margin: 10px;
								border-radius: 10px;
								display: inline-flex;
								justify-content: center;
								align-items: center;
								background-image: url('http://eb118-file.cdn.bcebos.com/upload/4c1923a667444f259c9ff79afbeaadb6_1525525898.png?');
								background-color: #81a5bd;


								&:nth-child(2) {
									background-image: url('https://gd-hbimg.huaban.com/5c1c34bb1556c2d646cb9cd3832f76b2e696d3574115f-U9zBdg');
								}

								&:nth-child(3) {
									background-image: url('https://gd-hbimg.huaban.com/b4cdf8d9c3fc277d6ae8bcf1cb123bce8a384245afd59-CrGWsU_fw1200');
								}

								&:nth-child(4) {
									background-image: linear-gradient(to top right, #fd5777, #fec576);
								}

								span {
									display: inline-flex;
									justify-content: center;
									align-items: center;
									width: 100%;
									height: 100%;
									border-radius: 10px;
									color: #ffffff;
									background-color: rgba(0, 0, 0, .47);
									font-weight: bold;
									font-family: cursive;
									font-size: 30px;
								}

								&:hover {
									// background-color: rgba(194, 252, 252, .13);
									box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
								}
							}


						}

						&:hover {
							// background-color: rgba(194, 252, 252, .13);
							box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
						}
					}

					.predictioninfo {
						.search {
							width: 100%;
							background-image: linear-gradient(to top right, #646464, #4a939e);
							height: 50px;
							margin-bottom: 10px;
							border-radius: 50px;

							input {
								background-color: transparent;
								width: 200px;
								height: 50px;
								padding: 0px 20px;
							}

							.pic {
								position: relative;
								background-color: transparent;
								width: 50px;
								height: 50px;
								background-image: url('https://gd-hbimg.huaban.com/ebdddd7b212eff328ee1d55b788a2ad25bc4f15a2325-Mz91P9');
								background-position: center center;
								background-size: cover;
								background-repeat: no-repeat;
								border: none;
								border-radius: 50%;
								top: -52px;
								left: 38vw;
							}
						}

						.noneprediction {
							display: grid;
							grid-template-columns: repeat(1, 1fr);
							justify-items: center;
							list-style-type: none;
							padding: 20px;
							box-sizing: border-box;
						}

						.prediction {
							display: grid;
							grid-template-columns: repeat(1, 1fr);
							justify-items: center;
							list-style-type: none;
							padding: 0;
							box-sizing: border-box;


							.navbar {
								display: grid;
								grid-template-columns: repeat(3, 1fr);
								justify-items: center;
								list-style-type: none;
								padding: 0;
								box-sizing: border-box;
								background-color: #222222;
								width: 100%;
								position: sticky;
								top: 0;


								.span1 {
									width: 100px;
									text-align: center;
									padding: 5px;
									position: relative;
									margin-bottom: 5px;
									color: #f5f5f5;

									&::before {
										content: '';
										position: absolute;
										width: 30%;
										height: 2px;
										bottom: 0px;
										left: 50%;
										transform: translateX(-50%);
										background-color: rgba(255, 255, 255, 1);
										opacity: 1;
										border-radius: 5px;
									}
								}

							}

							.prompt {
								background-color: #5b5b5b;
								text-align: center;
								padding: 5px;
								border-radius: 5px;
								color: #b19220;
								left: 0;
								display: flex;
								align-items: center;
								justify-content: center;
								height: 22px;
								font-size: 12px;
								width: 100%;
							}

							li {
								background-color: rgba(179, 179, 179, 0.3);
								width: 100%;

								.row {
									display: grid;
									grid-template-columns: repeat(3, 1fr);
									justify-items: center;
									list-style-type: none;
									padding: 0;
									box-sizing: border-box;
									width: 100%;
									padding: 5px 0px;
									border-bottom: #acacac solid 1px;

									.span2 {
										display: inline-flex;
										justify-content: center;
										align-items: center;
										text-align: center;
										color: #000;
									}
								}


								span {
									display: block;
									text-align: center;
									width: 100px;
									padding: 10px;
									margin: 0 auto;
									background-color: transparent;
								}

								&:hover {
									background-image: linear-gradient(to top right, #646464, #4a939e);
								}
							}
						}
					}



				}
			}
		}

		.winfroted-glass {
			display: none;
		}

		.toptitle {
			display: none;
		}

		.righttop {
			display: none;
		}

		@media (max-width: 640px) {
			.frosted-glass .title {
				font-size: 2em;
			}
		}
	}

	.bubble-bgwall {
		position: relative;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.bubble {
		display: flex;
		position: absolute;
		bottom: -200px;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		width: 50px;
		height: 50px;
		background-color: rgba(255, 255, 255, 0.15);
		color: #44397a;
		animation: bubble 15s infinite;
	}

	.bubble:nth-child(1) {
		left: 10%;
	}

	.bubble:nth-child(2) {
		left: 20%;
		width: 90px;
		height: 90px;
		animation-duration: 7s;
		animation-delay: 2s;
	}

	.bubble:nth-child(3) {
		left: 25%;
		animation-delay: 4s;
	}

	.bubble:nth-child(4) {
		left: 40%;
		width: 60px;
		height: 60px;
		background-color: rgba(255, 255, 255, 0.3);
		animation-duration: 8s;
	}

	.bubble:nth-child(5) {
		left: 70%;
	}

	.bubble:nth-child(6) {
		left: 80%;
		width: 120px;
		height: 120px;
		background-color: rgba(255, 255, 255, 0.2);
		animation-delay: 3s;
	}

	.bubble:nth-child(7) {
		left: 32%;
		width: 160px;
		height: 160px;
		animation-delay: 2s;
	}

	.bubble:nth-child(8) {
		left: 55%;
		width: 40px;
		height: 40px;
		font-size: 12px;
		animation-duration: 15s;
		animation-delay: 4s;
	}

	.bubble:nth-child(9) {
		left: 25%;
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.3);
		font-size: 12px;
		animation-duration: 12s;
		animation-delay: 2s;
	}

	.bubble:nth-child(10) {
		left: 85%;
		width: 160px;
		height: 160px;
		animation-delay: 5s;
	}

	@keyframes bubble {
		0% {
			opacity: 0.5;
			transform: translateY(0) rotate(45deg);
		}

		25% {
			opacity: 0.75;
			transform: translateY(-400px) rotate(90deg);
		}

		50% {
			opacity: 1;
			transform: translateY(-600px) rotate(135deg);
		}

		100% {
			opacity: 0;
			transform: translateY(-1000px) rotate(180deg);
		}
	}

	@keyframes code {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>